<template>
    <div>
      <headCommod/>
      <div ref="userinfo" class="container userinfo cl">
        <div class="left to-right">
          <asideCommod/>
        </div>
        <div class="right">
          <breadcrumbCommod class="to-bottom" title="进口商"/>
          <div class="main bg-white to-left">
            <div class="info">
              <div class="search">
                <div class="form-right cl" style="margin-bottom: 22px;">
                  <el-button type="success" size="mini" icon="el-icon-plus" plain>新增</el-button>
                </div>
                <div class="list cl">
                  <table class="wj-table">
                    <tr>
                      <th>进口商名</th>
                      <th>国家</th>
                      <th>购买来源</th>
                      <th>性质</th>
                      <th>有效开始时间</th>
                      <th>有效结束时间</th>
                      <th>有效状态</th>
                      <th>税号</th>
                      <th>VAT</th>
                      <th>是否默认</th>
                    </tr>
                    <tr v-for="item in 4" class="wj-table-shadown">
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td>TEST123</td>
                    </tr>
                  </table>
                </div>
                <div class="pages">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    prev-text="上一页"
                    next-text="下一页"
                    :page-size="100"
                    layout="prev, pager, next"
                    :total="1000">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import headCommod from '../components/Head'
import asideCommod from '../components/Aside'
import breadcrumbCommod from '../components/Breadcrumb'

export default {
  name: 'importer',
  data () {
    return {
      currentPage: 1,
      form: {}
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  mounted () {
  },
  components: {
    headCommod,
    asideCommod,
    breadcrumbCommod
  }
}
</script>

<style scoped>
 .info {
   background: #fff;
   width: calc(100% - 40px);
   padding: 20px 10px;
 }

  .tx {
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    margin: 20px auto;
  }

 .tx img {
   position: relative;
   top: 10px;
   opacity: 0.5;
 }

  .explain {
    color: #999;
    font-size: 11px;
    margin: 10px 0;
  }

  .list {
    background: #f1f2f6;
    padding: 10px 0;
  }

 .list-item {
   background: #fff;
   margin: 15px 0;
   border-radius: 10px;
 }

  .list-item li {
    float: left;
    list-style: none;
    border-right: 1px solid #508c5f;
    text-align: center;
    width: 130px;
    line-height: 25px;
  }

 .list-item li p.min {
   font-size: 12px;
   color: #999;
 }

 .list-item li:last-child {
   border: none;
 }

  .pages {
    margin-top: 20px;
    text-align: center;
  }

  .main {
    margin-top: 10px;
  }
</style>

<style>
  .w .el-form-item__content {
    width: 300px;
  }

  .m .el-form-item__content {
    width: 100px;
  }
</style>
